<template>
  <div class="app" >
    <!-- navbar组件 -->
    <van-nav-bar
      title="详情"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <DetailHeader :info="info" :shopinfo="shopinfo"></DetailHeader>
    <!-- 商品列表的渲染 -->
    <div class="list">
      <div class="left">
        <van-sidebar v-model="currentIndex">
          <van-sidebar-item v-for="(item,index) in taglist" :key="index" :title="item.name" />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="tab" v-for="(item,index) in taglist[currentIndex] && taglist[currentIndex].goodlist" :key="index">
          <img :src="item.picture" alt="">
          <div class="text">
            <h4>{{item.name}}</h4>
            <div class="price">
              <div class="price_">￥{{item.min_price}}</div>
              <div class="btn">
                <!-- <button @click="redGoods(item)">-</button>
                <span> {{item.count}} </span> -->
                <button @click="addGoods(item)">+</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车列表 -->
    <Shopcart ref="changshopcart"></Shopcart>

    <!-- 底部导航栏 -->
    <div class="total">
        <van-icon name="cart-o" :badge="totalNum" color="#1989fa" size="40"  @click="changevisible"/>
        <div>
            总价:<span>￥{{totalPrice}}</span>
            数量:<span>{{totalNum}}</span>
        </div>
        <button @click="payorder">去结算</button>
    </div>


      <Footer></Footer>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapActions,mapGetters,mapMutations,mapState } from 'vuex'
import Shopcart from '../components/Shopcart.vue'
import DetailHeader from '../components/DetailHeader.vue'
import Footer from '../components/Footer.vue'
import {shop_info} from '../utils/api'
export default {
  data(){
    return{
      visible:false,
      currentIndex:0,
      info:{},
      shopinfo:{},
      taglist:[]
    }   
  },
  components:{
    Footer,
    DetailHeader,
    Shopcart
  },
  mounted(){
    shop_info({id:this.$route.params.id}).then((res)=>{
      this.info=res.data.shopinfo.info
      this.taglist=res.data.shopinfo.taglist
      this.shopinfo=res.data.shopinfo
    })
  },
  computed:{
    ...mapState(['shop_cart_list']),
   ...mapGetters(['totalPrice','totalNum'])
  },
  methods: {
    ...mapActions(['request_addshopcart']),
    ...mapMutations(['save_paylist']),
    onClickLeft() {
      this.$router.go(-1)
    },
    addGoods(item){
      this.request_addshopcart(item)
    },
    redGoods(item){
      if(item.month_saled%10>0){
         item.month_saled--
      }    
    },
    changevisible(){
      this.$refs.changshopcart.change();
    },
    //更新支付订单，跳路由
    payorder(){
      if(this.shop_cart_list.length!=0){
        this.$router.push('/pay');
        this.save_paylist();
      }else{
        Toast('购物车里空空如也')
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>

.list{
    background-color: white;
    display: flex;
    padding-right: 10px;
    .left{
      .tab{
        margin-bottom: 30px;
      }
    }
    .right{
      padding-top: 10px;
      .tab{
        display: flex;
        margin-bottom: 20px;
        img{
        width: 80px;
        height: 80px;
        margin-right: 10px;
        }
        .text{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .price{
            display: flex;
            justify-content: space-around;
            .price_{
            color: red;
            font-size: 20px;
            
            }
            .btn{
              margin-left: 50px;
              button{
              width: 20px;
              height: 20px;
              border-radius: 10px;
              border: none;
              color: white;
              background-color: rgb(103, 178, 248);
              }
            }
          }  
        }
      }
    }
  }
  .total {
           width: 100%;
           height: 60px;
           color: rgb(222, 222, 222);
           position: fixed;
           align-items: center;
           bottom: 0;
           left: 0;
           padding: 10px;
           font-size: 18px;
           box-sizing: border-box;
           background-color: rgb(54, 54, 54);
           display: flex;
           justify-content: space-around;
       }

       .total button {
           width: 100px;
           height: 40px;
           color: white;
           font-size: 18px;
           border-radius: 5px;
           background-color: rgb(9, 163, 27);
       }
</style>